<template>
  <div class="dailyManger">
    <div class="dailyManger-top">
      <el-button type="primary" round @click="emptyDaily">清空日志</el-button>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['12:00:00']"
      >
      </el-date-picker>
    </div>
    <div class="daily-table">
      <CostomTable
        :tableData="tableData"
        :nameData="nameData"
        operatWidth="60"
        :operating="operating"
         :pagination="pagination"
        :currentChange="currentChange"
      />
    </div>
  </div>
</template>

<script>
import CostomTable from "@/components/costomTable.vue";
export default {
  data() {
    return {
      pageNum: 1,
      value1: "",
      nameData: [
        { label: "用户名", property: "userName" },
        { label: "角色", property: "character" },
        { label: "操作记录", property: "operatRecord" },
        { label: "操作时间", property: "operatTime" },
      ],
      tableData: [
        {
          userName: "admin",
          character: "单位",
          operatRecord: "成都市政府",
          operatTime: "No. 189, Grove St, Los Angeles",
        },
      ],
      operating: [
        {
          name: "删除",
          fun: (index) => {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                
                this.axios("post", this.inter.postDeleteRemove, {
                  ids: this.tableData[index].ids,
                }).then((res) => {
                  this.$message({
                    message: "删除成功",
                    offset: 300,
                    type: "success",
                  });
                  this.pageNum = 1;
                  this.getData();
                });
              })
              .catch(() => {});
          },
        },
      ],
      pagination:1
    };
  },
  components: {
    CostomTable,
  },
  methods: {
    getData() {
      this.axios("post", this.inter.postOperlogList, {
        pageSize: 10,
        pageNum: this.pageNum,
      }).then((res) => {
        this.tableData = [];
        this.pagination = res['total']
        res.list.filter((item) => {
          this.tableData.push({
            userName: item.operName,
            operatRecord: item.title,
            character: item.operatorType,
            operatTime: item.operTime,
            ids: item.operId,
          });
        });
      });
    },
    currentChange(page){
      this.pageNum = page
      this.getData()
    },
    emptyDaily() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios("post", this.inter.postRoleClean).then((res) => {
            this.$message({
              message: "清空完毕",
              offset: 300,
            });
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
.dailyManger {
  .daily-table {
    padding: 0.1rem;
    height: 80vh;
    overflow-y: scroll;
  }
  &-top {
    .el-button {
      margin-right: 0.1rem;
    }
    display: flex;
    padding: 0.1rem;
  }
  background: #fff;
  margin: 0.1rem;
}
</style>